<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('申请单') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('申请标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请人') }}</td>
        <td>
          {{ form.userName }}
        </td>
        <td class="tit">{{ $t('申请时间') }}</td>
        <td>{{ parseTime(form.applyTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('费用金额(元)') }}</td>
        <td>
          {{ moneyFormat(form.amountMoney) }}
        </td>
        <td class="tit">
          <span v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">
            {{ $t('付款完成时间') }}
          </span>
        </td>
        <td>
          <span v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">
            {{ parseTime(form.payCompletionTime) }}
          </span>
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('备注') }}</td>
        <td colspan="3">
          {{ form.costsThat }}
        </td>
      </tr>
    </table>
    <div>
      <div v-if="form.dealExpenseDetailList && form.dealExpenseDetailList.length > 0" class="area-header">
        <span class="area-header-title">{{ $t('费用明细') }}</span>
      </div>
      <ul class="detailList">
        <li v-for="(item, index) in form.dealExpenseDetailList" :key="index">
          <div v-if="item.fileList !== null && item.fileList !== '' && item.fileList !== undefined" class="divBor">
            <p>{{ $t('发票') }}:</p>
            <p class="linka">{{ item.fileList.name }}</p>
          </div>
          <div class="divBor">
            <p>{{ $t('部门') }}:</p>
            <p>
              {{ item.departmentName }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('金额(元)') }}:</p>
            <p>
              {{ moneyFormat(item.money) }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('费用类型') }}:</p>
            <p>
              <el-cascader v-model="item.typeArray" :options="getFdSubjectList" clearable>
                <template slot-scope="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('发生时间') }}:</p>
            <p>
              {{ parseTime(item.time) }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('发票代码') }}:</p>
            <p>
              {{ item.invoiceId }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('备注') }}:</p>
            <p>
              {{ item.remark }}
            </p>
          </div>

        </li>
      </ul>
    </div>

    <FileView :list.sync="form.fileList" data-type="deal_expense" :business-id="autoBusinessId($route.query.id, form)" :btn-show="!otherBtnHide" />

  </div>
</template>

<script>
  import { getDealExpense } from '@/api/deal/expense/expense'
  import { getFdSubjectList } from '@/api/fd/config/getTypeMain'

  export default {
    components: {
    },
    data() {
      return {
        // 是否隐藏保存按钮
        btnHide: false,
        // 是否隐藏其它按钮
        otherBtnHide: false,

        // 表单参数
        form: {
          // 费用明细
          dealExpenseDetailList: [],
          fileList: []
        },

        // 遮罩层
        loading: false,
        // 操作按钮默认不展示
        buttonShow: true,
        // 付款大类
        getFdSubjectList: [],
        // 上传文件
        fileList: [],
        // 是否显示上传按钮
        isShowUploadBtn: true,
        deptOptions: [],
        listIndex: null,
        // 查看文件id
        previewId: undefined
      }
    },
    computed: {
      // Uploader实例
      uploader() {
        return this.$refs.uploader.uploader
      }
    },
    created() {
      // 付款大类
      getFdSubjectList('expense').then(response => {
        this.getFdSubjectList = this.changeSubjectList(response.data)
      })
      this.$bus.$emit('async_done')
    },
    mounted() {
    },
    methods: {
      changeSubjectList(val) {
        const arr = []
        if (val.length !== 0) {
          val.forEach(item => {
            const obj = {}
            obj.value = item.value
            obj.label = this.$t(item.label)
          if (item.children && item.children.length > 0) {
              obj.children = this.changeSubjectList(item.children)
            }
            arr.push(obj)
          })
        }
        return arr
      },
      // 初始化数据
      init(data) {
        this.loading = true
        if (data != null && data.id !== undefined) {
          getDealExpense(data.id).then(response => {
            this.form = response.data
            this.loading = false
          })
        }
      },

      // 计算报销总额
      getSummaries() {
        let sum = 0
        if (this.form.dealExpenseDetailList !== null && this.form.dealExpenseDetailList !== undefined && this.form.dealExpenseDetailList.length > 0) {
          this.form.dealExpenseDetailList.forEach(item => {
            if (item.money !== undefined && item.money !== null && item.money !== '') {
              sum += +item.money
            }
          })
          this.$set(this.form, 'amountMoney', sum)
        }
        return sum
      }

    }
  }
</script>
<style lang="scss" scoped>

</style>
